import React from 'react'
import { Form, Input, Modal, Table, Menu, Dropdown, Button, Row, Col, Icon } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 12,
  },
  wrapperCol: {
    span: 12,
  },
}
const ColProps = {
  span: 12,
  style: {
    marginBottom: 0,
  },
}
const SearchModal = ({
  customerRes,
  visible,
  isfind,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  handleOK,
  handleCancle,
  customerInfo,
  goDetail,
  handleAdd,
}) => {
  const onOk = () => {
    validateFields((error, values) => {
      if (error) {
        return
      }
      for (let prop in values) {
        if (values[prop] === undefined || /^\s*$/.test(values[prop])) {
          delete values[prop]
        } else {
          values[prop] = values[prop].trim()
        }
      }
      handleOK(values)
    })
  }
  const handleMenuItemClick = (e, record) => {
    if (e.key === 'item_0') {
      goDetail(record)
    }
  }
  const menu = (
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">Add Transaction</a>
    </Menu.Item>
  )
  const TableProps = {
    dataSource: customerRes,
    columns: [{
      title: 'CustomerName',
      dataIndex: 'CustomerName',
      key: 'CustomerName',
      render: (text, record) => {
        return <span>{`${record.firstName} ${record.middleName} ${record.lastName}`}</span>
      },
    }, {
      title: 'Nationality',
      dataIndex: 'nationality1',
      key: 'nationality1',
    }, {
      title: 'Phone No',
      dataIndex: 'phoneNumber',
      key: 'phoneNumber',
    }, {
      title: 'Operation',
      dataIndex: 'Operation',
      key: 'Operation',
      render: (text, record) => {
        return (
          <Dropdown overlay={<Menu onClick={(e) => { handleMenuItemClick(e, record) }}>{menu}</Menu>}>
            <Button icon="menu-unfold"><Icon type="down" /></Button>
          </Dropdown>
        )
      },
    }],
    rowKey: (record) => {
      return record.customerNumber
    },
  }
  return (
    <Modal title="Search Customer"
      visible={visible}
      onCancel={handleCancle}
      onOk={onOk}
      okText="Search"
      width="750"
    >
      <Row gutter={0}>
        <Col {...ColProps} >
          <FormItem label="CustomerName" hasFeedback {...formItemLayout}>
            {getFieldDecorator('customerName', {
              initialValue: customerInfo && customerInfo.customerName,
            })(<Input />)}
          </FormItem>
        </Col>
        <Col {...ColProps} >
          <FormItem label="Phone No" hasFeedback {...formItemLayout}>
            {getFieldDecorator('phoneNumber', {
              initialValue: customerInfo && customerInfo.phoneNumber,
              rules: [
                {
                  required: false,
                  max: 8,
                  min: 1,
                },
              ],
            })(<Input />)}
          </FormItem>
        </Col>
        <Col {...ColProps} >
          <FormItem label="CustomerNo" hasFeedback {...formItemLayout}>
            {getFieldDecorator('customerNumber', {
              initialValue: customerInfo && customerInfo.customerNumber,
            })(<Input />)}
          </FormItem>
        </Col>
        <Col {...ColProps} >
          <FormItem label="CustomerID" hasFeedback {...formItemLayout}>
            {getFieldDecorator('customerId', {
              initialValue: customerInfo && customerInfo.customerId,
            })(<Input />)}
          </FormItem>
        </Col>
      </Row>
      {
        isfind === true && <Table {...TableProps} />
      }
      {
        isfind === false && <span style={{ marginLeft: '20%' }}>do not find customer ,please check you information, or <a onClick={handleAdd}>add</a> a new customer you want</span>
      }
    </Modal>
  )
}

export default Form.create()(SearchModal)
